<template>
  <div>
    <!-- 表单查询 -->
    <a-row>
      <a-col :span="6">
        <a-form-item
          label="社区名称"
          :wrapper-col="{ span: 16 }"
          name="communityName"
        >
          <a-input
            v-model:value="queryData.communityName"
            placeholder="请输入社区名称"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item
          label="社区地址"
          :wrapper-col="{ span: 16 }"
          name="communityAddress"
        >
          <a-input
            v-model:value="queryData.communityAddress"
            placeholder="请输入社区地址"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="省市区" name="districtsId">
          <SelectPosition @onSelect="onSelect" v-model="islear" />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-button @click="reset" style="margin-left: 20px">重置</a-button>
        <a-button
          @click="queryList"
          style="margin: 0 20px; background-color: #6a2c70"
          type="primary"
          >查询</a-button
        >
        <a-button
          type="primary"
          @click="addCommunity"
          style="background-color: #b83b5e"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          新增社区</a-button
        >
      </a-col>
    </a-row>

    <!-- 社区列表 -->
    <a-table
      @change="handleTableChange"
      :loading="isloading"
      :pagination="pagination"
      :columns="columns"
      :data-source="communityList.data"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'index'">
          {{
            queryData.page == 1
              ? index + 1
              : (queryData.page - 1) * queryData.pageSize + index + 1
          }}
        </template>

        <template v-if="column.key === 'communityAddress'">
          <a-tooltip>
            <template #title>{{ record.communityAddress }}</template>
            <div class="hidden">{{ record.communityAddress }}</div>
          </a-tooltip>
        </template>

        <template v-if="column.key === 'communityImage'">
          <a-image
            style="border-radius: 8px"
            :width="60"
            :src="record.communityImage"
          />
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="primary"
            @click="editCommunity(record)"
            style="margin-right: 20px; background-color: #f5b017"
            >编辑</a-button
          >
          <a-popconfirm
            title="确认删除此社区吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="deleteCommunity(record)"
          >
            <a-button type="primary" style="background-color: #f38181" danger
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <!-- 抽屉 -->
    <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      :title="drawerTitle"
      placement="right"
      width="60%"
      :maskClosable="false"
    >
      <CommunityDrawer
        v-if="open"
        :communityId="communityId"
        @receiveData="receiveData"
      />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { userUserStore } from '@/stores/UserStore'
import { columnData } from './column'
import { PaginationModel } from '@/api/config/Model'
import { QueryData } from '@/api/Community/model'
import { apiList, apiDelete } from '@/api/Community/api'
import { PlusOutlined } from '@ant-design/icons-vue'
import SelectPosition from '@/common/selectPosition.vue'
import CommunityDrawer from './CommunityDrawer.vue'
import { message } from 'ant-design-vue'
const store = userUserStore()
const userInfo: any = ref({})
const columns = columnData
const communityId = ref(null)
const queryData = reactive<QueryData>({
  communityId: null,
  communityName: '',
  communityAddress: '',
  pageSize: 10,
  page: 1,
  provincesId: null,
  citiesId: null,
  districtsId: null,
  provincesName: '',
  citiesName: '',
  districtsName: '',
})

const pagination = ref<PaginationModel>({
  current: 1,
  total: 100,
  pageSize: 10, //每页中显示10条数据
  pageSizeOptions: ['10', '20', '30'],
})
const islear = ref(false)
const open = ref(false)
const drawerTitle = ref('新增社区')
const communityList = reactive({
  data: [],
})
const isloading = ref<boolean>(false)
const queryList = () => {
  getList()
}

//重置查询表单
const reset = () => {
  Object.keys(queryData).forEach((key) => delete queryData[key])
  queryData.page = 1
  queryData.pageSize = 10
  islear.value = true
  getList()
  setTimeout(() => {
    islear.value = false
  }, 300)
}

const editCommunity = (item: any) => {
  communityId.value = item.communityId
  open.value = true
  drawerTitle.value = '修改社区'
}
// 分页改变
const handleTableChange = (page: any) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  queryData.page = page.current
  queryData.pageSize = page.pageSize
  getList()
}

//接受抽屉传递过来的数据
const receiveData = (type: number, error: string) => {
  if (type == 1) {
    message.success('修改成功')
  } else if (type == 3) {
    message.success('添加成功')
  } else if (type == 2) {
    message.error(error)
  } else {
    message.error(error)
  }
  getList()
  communityId.value = null
  open.value = false
}

// 删除社区
const deleteCommunity = async (record: any) => {
  try {
    let res: any = await apiDelete(record.communityId)
    if (res.code == 200) {
      message.success('删除成功')
      getList()
    }
  } catch (error: any) {
    message.error(error)
  }
}

// 新增社区
const addCommunity = () => {
  open.value = true
  drawerTitle.value = '新增社区'
}

const onSelect = (data: any) => {
  queryData.citiesId = data.citiesId
  queryData.citiesName = data.citiesName
  queryData.districtsId = data.districtsId
  queryData.districtsName = data.districtsName
  queryData.provincesId = data.provincesId
  queryData.provincesName = data.provincesName
}

const getList = async () => {
  isloading.value = true
  try {
    let res = await apiList(queryData)
    communityList.data = res.data.records
    pagination.value.current = res.data.current
    pagination.value.pageSize = res.data.size
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取社区列表失败')
  }
  isloading.value = false
}

onMounted(async () => {
  //如果不是超级管理员就对社区id进行固定
  userInfo.value = store.employeeInfo
  if (userInfo.value.empId != 0) {
    queryData.communityId = userInfo.value.communityId
  }
  getList()
})
</script>

<style lang="less" scoped>
.hidden {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
